<template>
	<view>
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="个人主页" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="container">
			<YongHuInfo :avatarUrl="avatarUrl" :backgroundUrl="backgroundUrl" :nickname="nickname"></YongHuInfo>
			<YongHuGeDan @jump="jump" :playlist="playlist"></YongHuGeDan>
			<view class="zuijingbofang">
				<h3 class="gedan">听歌排行</h3>
				<view class="list">
					<view class="chileList" v-for="(item,index) in listen" :key="index" @click="sing(item.song.id)">
						<span>{{index > 8 ? index + 1 : '0' + (index + 1)}}</span>
						<view class="neirong">
							<view class="title2">{{item.song.name}}</view>
							<view class="name">{{item.song.ar[0].name}} - {{item.song.name}}</view>
						</view>
						<view class="pic">
							<image src="../../static/zhanting.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import YongHuInfo from '../../components/YongHuInfo/YongHuInfo.vue'
	import YongHuGeDan from '../../components/YongHuGeDan/YongHuGeDan.vue'
	import {detail,playlist,record} from  '../../api/UserInfo/UserInfo.js'
	export default {
		components:{
			uniNavBar,
			YongHuInfo,
			YongHuGeDan
		},
		onLoad(option) {
			detail({uid:option.id}).then(res => {
				this.avatarUrl = res.profile.avatarUrl//用户头像
				this.backgroundUrl = res.profile.backgroundUrl//用户背景图片
				this.nickname = res.profile.nickname//用户名字
			})
			playlist({uid:option.id}).then(res => {
				this.playlist = res.playlist
			})
			record({type:0,uid:option.id}).then(res => {
				this.listen = res.allData
			})
		},
		data() {
			return {
				avatarUrl:'',
				backgroundUrl:'',
				nickname:'',
				playlist:[],
				listen:[]
			}
		},
		methods:{
			sing(id){
				uni.navigateTo({
					url:'../BoFangQi/BoFangQi?id=' + id
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../AllGeDan/AllGeDan?id=' + id + '&num=1'
				})
			},
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
		.zuijingbofang{
			width: 100%;
			.gedan{
				padding-left: 10px;
				background-color: #eeeff0;
				font-size: 12px;
				color: #666;
				margin-bottom: 0px;
				height: 28px;
				display: flex;
				align-items: center;
			}
			.list{
				width: 100%;
				margin-bottom: 20rpx;
				.chileList{
					width: 100%;
					//height: 70px;
					//background: yellow;
					display: flex;
					align-items: center;
					span{
						color: #df3436;
						margin-left: 20rpx;
						font-weight: 500;
						font-size: 40rpx;
					}
					.neirong{
						height: 100%;
						width: 70%;
						//background-color: hotpink;
						margin-left: 20rpx;
						.title2{
							font-size: 34rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;//添加省略号
							white-space: nowrap;//不进行换行
							word-break: normal;    
						}
						.name{
							font-size: 24rpx;
							color: #888;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;//添加省略号
							white-space: nowrap;//不进行换行
							word-break: normal; 
						}
					}
					.pic{
						margin-left: 50rpx;
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
			}
		}
	}
</style>
